<script setup>
import { ref, computed } from 'vue'
import router from '@/router/index.js'
import { useBlogsStore } from '@/stores/blog.js'
const blog = ref({
  title: '',
  content: '',
})

const isFromInvalid = computed(() => {
  return !blog.value.title.trim() || !blog.value.content.trim()
})

const submit = () =>{
  useBlogsStore().addBlog(blog.value);
  // router.push('/')
  router.push({name:'home'})
}
</script>

<template>
  <div class="outer-container">
      <form class="form" @submit.prevent="submit">
        <h1>新建设博客</h1>
        <h3>标题</h3>
        <input type="text" class="input-field" v-model="blog.title" />
        <h3>内容</h3>
        <textarea class="input-field" v-model="blog.content"></textarea>
        <button class="button" :disabled="isFromInvalid">新建</button>
      </form>
  </div>
</template>

<style scoped>
.outer-container {
  display: flex; /* 使用 Flexbox 使内容居中 */
  justify-content: center; /* 水平居中 */
  width: 100%; /* 占满视口宽度 */
  box-sizing: border-box; /* 确保 padding 包含在宽度内 */
}

.form {
  display: flex;
  flex-direction: column; /* 垂直排列子元素 */
  align-items: center; /* 水平居中子元素 */
  width: 100%; /* 占满视口宽度 */
  max-width: 600px; /* 限制最大宽度 */
  padding: 20px; /* 内部间距 */
  box-sizing: border-box; /* 确保 padding 包含在宽度内 */
  margin-top: 20px; /* 添加顶部间距，调整离顶部距离 */
}

h1, h3 {
  text-align: center; /* 使标题水平居中 */
  margin: 10px 0; /* 标题间距 */
}

.input-field {
  width: 100%; /* 使 input、textarea 宽度一致 */
  padding: 8px; /* 内部间距 */
  margin-bottom: 10px; /* 底部间距，方便阅读 */
  border: 1px solid #ccc; /* 轻微边框 */
  border-radius: 4px; /* 圆角 */
  font-size: 1rem; /* 统一字体大小 */
  box-sizing: border-box; /* 确保 padding 和 border 包含在宽度内 */
}

.button {
  width: 120px; /* 固定宽度，缩短按钮长度 */
  padding: 8px; /* 内部间距 */
  margin-bottom: 10px; /* 底部间距 */
  border: 1px solid #ccc; /* 轻微边框 */
  border-radius: 4px; /* 圆角 */
  font-size: 1rem; /* 统一字体大小 */
  background-color: #f5f5f5; /* 禁用或默认状态的浅灰色背景 */
  color: #666; /* 禁用或默认状态的文字颜色 */
  cursor: pointer; /* 鼠标手型，提示可点击 */
  box-sizing: border-box; /* 确保 padding 和 border 包含在宽度内 */
  transition: all 0.3s ease; /* 平滑过渡效果 */
}

/* 非禁用状态（正常状态） */
.button:not(:disabled) {
  background-color: #1e88e5; /* 深蓝色背景 */
  color: #ffffff; /* 白色文字 */
  border-color: #1e88e5; /* 边框颜色与背景一致 */
}

/* 鼠标悬停效果（非禁用状态） */
.button:not(:disabled):hover {
  background-color: #1565c0; /* 更深的蓝色，悬停时 */
  color: #ffffff; /* 白色文字 */
}

/* 禁用状态 */
.button:disabled {
  background-color: #f5f5f5; /* 保持浅灰色背景 */
  color: #999; /* 更浅的灰色文字，提示禁用 */
  cursor: not-allowed; /* 鼠标变为禁止符号，提示不可点击 */
}

textarea {
  height: 150px; /* 设置 textarea 的默认高度 */
  resize: vertical; /* 允许用户垂直调整 textarea 高度 */
}
</style>
